<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-color: #f5f5f5;
      display:flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      height: 100vh;
    }
    .left{
      width: 50%;
      height: 100%;
      transform-origin: right top;
    /* 设置变换的原点在左上角 */
      transform: skewX(-20deg);
    /* 在垂直方向上倾斜20度 */
      background-color: black;
      background-image: url(image/注册.png);
   

    }
    .right{
      margin-right: 150px;
      margin-top: 40px;
    }

    #loginForm {
      width: 400px;
      height: 300px;
      border: 1px solid gray;
      border: 0;
      outline: 0;
      box-shadow: 0 0 10px rgb(0, 0, 0, 0.3);
      margin: 150px auto;
      border-radius: 10px;
       text-align: center;
      vertical-align: center;

    }

    h1 {
      /* margin-top:15px; */
      font-family: 仿宋;
      text-align: center;
      vertical-align: top;

    }

    

    #loginForm input {
      margin-top: 20px;
      width: 200px;
      height: 30px;
      border: 0;
      outline: 0;
      border-radius: 10px;
      margin-left: 30px;
     


    }

    .sub {
      width: 100px;
      height: 40px;
      margin-left: 40px;
      margin-top: 20px;
      border-radius: 10px;
      border: 0;
      outline: 0;
      background-color: #007BFF;
      color: white;
      font-size: 15px;
    }

    .sub:active {
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div class="left"></div>
  <div class="right">
    <form id="loginForm">
      <h1>登录</h1>
      用户名:<input type="text" id="username" placeholder="Username" required><br>
      密码:<input type="password" id="password" placeholder="Password" required><br>
      <!-- <input type="email" id="email" placeholder="Email" required><br> -->
      <button type="submit" class="sub">登录</button>
      <div id="message"></div>
    </form>
  </div>
  

  
  <script>
    document.getElementById('loginForm').addEventListener('submit', function (event) {
      event.preventDefault();
      let username = document.querySelector('#username').value
      if (username.length < 8) {
        alert("输入的账号不能少于8")
        // console.log("输入的账号不能少于8");
        return
      }
      let password = document.querySelector('#password').value
      if (password.length < 6) {
        alert("输入的密码要大于等于6")
        // console.log("输入的密码要大于等于6");
        return
      }
      let data = {
        username,
        password
      }

      //3.内容验证
      fetch('http://hmajax.itheima.net/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data) // 将数据转换为JSON字符串 

      })
        .then(response => {
          if (!response.ok) {
            alert('账号或密码错误，请重新输入')
          } else {
            // 解析响应体为JSON  
            return response.json();
          }
        })
        .then(result => {
          // 处理成功响应  
          alert(result.message)
          // 其他操作...  
          window.location.href = "index.html";
        })
        .catch(error => {
          console.log('账号或密码错误，请重新输入');
        })
    })
  </script>
</body>

</html>